<template>
  <div>
    <el-row class="samples-info-box">
      <el-row class="samples-pageForm" style="margin-bottom:10px">
        <el-col :span="15">
          <span class="title">{{ contractType }}</span>
        </el-col>
        <el-col v-if="$route.params.type != 'detail'" :span="9" class="samples-text-right">
          <el-button size="mini" type="primary" plain @click="chooseBtn">选择合同</el-button>
        </el-col>
      </el-row>
      <s-table
        v-loading="false"
        :column="tableData.column"
        :data="tableData.data"
        :header-cell-class-name="headerCellClass"
      />
    </el-row>
    <select-contract :dialog-dis-p="dialogDisP" :classify-id="classifyId" :dialogtitle="Dialogtitle" @child-say="listenToMyBoy" @addMultiple="listenMultiple" />
    <!-- :table-classify-id="tableClassifyId" -->
  </div>
</template>
<script>
import sTable from '@/components/STable/s-table'
import selectContract from './selectContract'
// import * as contractCorrelationApi from '@/api/contractManage/contractCorrelation'
export default {
  components: {
    sTable,
    selectContract
  },
  props: {
    editData: {
      type: Array,
      default: () => []
    },
    contractType: {
      type: String,
      required: true
    },
    giveSingleName: {
      type: String,
      default: ''
    },
    giveProjectName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      Dialogtitle: '选择' + this.contractType,
      dialogDisP: false,
      classifyId: '',
      tableData: {
        column: [
          {
            prop: 'code',
            label: '合同编号',
            width: '200',
            fixed: true,
            render: (h, scope) => {
              return (
                <div
                  onClick={() => {
                    this.$router.push({
                      name: '/contractManage/contractMag/detail',
                      params: {
                        id: scope.row.id,
                        tagsName: scope.row.name
                      }
                    })
                  }}
                >
                  <a style='color:#CEAB70;cursor:pointer'>{scope.row.code}</a>
                </div>
              )
            }
          },
          {
            prop: 'name',
            label: '合同名称',
            width: '200'
          },
          {
            prop: 'partyAName',
            label: '甲方单位',
            width: '260',
            render: (h, scope) => {
              if (scope.row.serchAFlag) {
                return (
                  <div>
                    <a
                      style='display: block; color: #ceab70;text-decoration-line: underline;'
                      class='samples-table-overflow'
                      onClick={() => {
                        this.$router.push({
                          path: '/CRM/customerPrivateManageDetail',
                          query: { id: scope.row.partyAId }
                        })
                      }}
                    >
                      {scope.row.partyAName}
                    </a>
                  </div>
                )
              } else {
                return (
                  <span> {scope.row.partyAName} </span>
                )
              }
            }
          },
          {
            prop: 'partyBName',
            label: '乙方单位',
            width: '260',
            render: (h, scope) => {
              if (scope.row.serchBFlag) {
                return (
                  <div>
                    <a
                      style='display: block; color: #ceab70;text-decoration-line: underline;'
                      class='samples-table-overflow'
                      onClick={() => {
                        this.$router.push({
                          path: '/CRM/customerPrivateManageDetail',
                          query: { id: scope.row.partyBId }
                        })
                      }}
                    >
                      {scope.row.partyBName}
                    </a>
                  </div>
                )
              } else {
                return (
                  <span> {scope.row.partyBName} </span>
                )
              }
            }
          },
          {
            prop: 'amount',
            label: '金额',
            align: 'right',
            width: '125',
            render: (h, scope) => {
              const num = (Number(scope.row.amount).toFixed(2) + '').replace(
                /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                '$&,'
              )
              return <span>{num}</span>
            }
          },
          {
            prop: 'signedTime',
            label: '签订日期'
            // width: '140'
          },
          {
            prop: 'typeName',
            label: '合同类型',
            width: '140'
          },
          {
            label: '操作',
            fixed: 'right',
            width: '56',
            render: (h, scope) => {
              return (
                <div>
                  <el-popover
                    placement='left'
                    trigger='click'
                    popper-class='s-popover'
                    width='234'>
                    <div style='display:flex;align-items:center;justify-content:center;padding:20px 0;'>
                      <i class='el-icon-question' style='font-size:26px;margin-right:10px;color:#e05e5e'></i>
                        确定删除这条数据吗？
                    </div>
                    <div style='text-align: center; margin: 0'>
                      <el-button size='small' type='primary' plain onClick={ () => { this.handleClosePopover() }}>取 消</el-button>
                      <el-button type='primary' size='small' onClick={ () => { this.handleDel(scope.row) } }>确 认</el-button>
                    </div>
                    <el-button
                      type='text'
                      slot='reference'
                      class='samples-text-button-disabled'
                    >删 除</el-button>
                  </el-popover>
                </div>
              )
            }
          }
        ],
        data: [],
        options: {
          boundariesElement: 'scrollParent'
        }
      }
    }
  },
  watch: {
    editData: {
      handler: function(val, oldval) {
        console.log('editDataaaaaaaaaaaaaaaaaaaaaa', this.editData)
        console.log('父组件传过来的值', val)
        if (val != oldval) {
          console.log('editDataaaaaaaaaaaaaaaaaaaaaa', this.editData)
          this.getEditData()
        }
      }
      // immediate: true, // 关键
      // deep: true
    },
    giveSingleName: {
      handler: function(val, oldval) {
        if (val) {
          this.changeClasssify()
        }
      }
    },
    giveProjectName: {
      handler: function(val, oldval) {
        console.log(123)
        if (val) {
          this.changeClasssify()
        }
      }
    }
    // tableData: {
    //   handler2: function(val, oldval) {
    //     console.log('父组件传过来的值', val)
    //     if (val.data.length > 1) {
    //       this.tableClassifyId = 1
    //     } else if (val.data.length > 1) {
    //       this.tableClassifyId = 1
    //     } else {
    //       this.tableClassifyId = ''
    //     }
    //   }
    // }
  },
  mounted() {
    if (this.$route.params.type == 'detail') {
      this.tableData.column.pop()
    }
    if (document.addEventListener) {
      // firefox
      document.addEventListener(
        'DOMMouseScroll',
        function() {
          console.log('wheel')
          document.querySelector('#app').click()
        },
        false
      )
    }
    // 滚动滑轮触发scrollFunc方法  //ie 谷歌
    // window.onmousewheel = document.onmousewheel = function() {
    //   console.log('wheel')
    //   document.querySelector('#app').click()
    // }
  },
  methods: {
    // 当某一个组件有值的时候  另一个的搜索条件会发生变化
    changeClasssify() {
      console.log(this.contractType, 'contractType')
      if (this.contractType === '收入合同' && this.giveSingleName.length) {
        // alert(1111111)
        this.classifyId = this.giveSingleName
      } else if (this.contractType === '支出合同' && this.giveProjectName.length) {
        // alert(3333333)
        this.classifyId = this.giveProjectName
      } else {
        this.classifyId = ''
      }
    },
    // 点击了选择合同按钮
    chooseBtn() {
      this.dialogDisP = true
    },
    listenToMyBoy(dialogDisP) {
      console.log('点击取消时子元素返回的dialogDisP', dialogDisP)
      this.dialogDisP = dialogDisP
    },
    getEditData() {
      console.log('this.editData', this.editData)
      this.tableData.data = this.editData
    },
    listenMultiple(Multiple) {
      console.log('要传到列表里的值', Multiple)
      if (!Array.isArray(Multiple)) {
        const arr = []
        arr.push(Multiple)
        this.tableData.data = arr
      } else {
        this.tableData.data.push(...Multiple)
        // 这里是数组去重，等真实数据到了的时候要再次测试一下
        const hash = {}
        this.tableData.data = this.tableData.data.reduce(function(item, next) {
          hash[next.code] ? '' : hash[next.code] = true && item.push(next)
          return item
        }, [])
      }
      this.endPushData()
      console.log('this.tableData.data', this.tableData.data)
    },
    // 点击删除按钮触发的事件
    handleDel(row) {
      this.handleClosePopover()
      for (let i = 0; i < this.tableData.data.length; i++) {
        if (row.code == this.tableData.data[i].code) {
          this.tableData.data.splice(i, 1)
        }
      }
      // alert(1122)
      this.endPushData()
    },
    // 把列表里的数据传到insert中，然后点击确定提交
    endPushData() {
      console.log('this.tableData.data  这里转测', this.tableData.data)
      this.$emit('pushData', this.tableData.data)
    },
    // 行内按钮点击取消/
    handleClosePopover() {
    //   document.querySelector('#app').click()
      this.$el.click()
    },
    tablecellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(column)
      if (column.type === 'default') {
        return { 'padding-left': '20px' }
      }
      if (column.type === 'index') {
        return { 'padding-left': '20px' }
      }
    },
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      if (column.type === 'index') {
        return 'indexTableHeaderStyle'
      } else if (column.type === 'selection') {
        return ''
      } else {
        return 'samples-header-cell'
      }
    }
  }

}
</script>
